<template>
  <div class="yingmoo-store">
    <ul class="nav">
      <router-link tag="li" to="/ymMemberstore">媒体管理</router-link>
      <router-link tag="li" to="/ymMemberstorecomboaddsubmit">套餐管理</router-link>
      <router-link tag="li" to="/ymMembermyactivity">我的活动</router-link>
      <router-link tag="li" to="/ymMembermycase">我的案例</router-link>
      <router-link tag="p" to="/ymMemberstore" class="uploading"><img src="../assets/ym-member/media/return.png" />返回</router-link>
    </ul>
    <div class="content">
      <h4>基础信息</h4>
      <div class="message">
        <div class="message-left">
          <!--<P>媒体编号</P>-->
          <p>媒体分类</p>
          <p>媒体名称</p>
          <p>所在地区</p>
          <p>详细地址</p>
          <p>价格单位</p>
          <p>底价</p>
          <p>最短投放期</p>
          <p>公司代理级别</p>
          <p>地图标注</p>
          <p style="height: 450px;" v-if="show_map"></p>
          <p>媒体简介</p>
          <p style="margin-top: 65px;">备注</p>
        </div>
        <div class="message-right">
          <!--<div class="input">
            <input type="text" v-model="mediaCode" readonly="readonly"/><span>*</span>
          </div>-->
          <div class="input">
            <select name="" id="cate1" class="sel" @change="showCate1Code">
            	<option value="">--请选择--</option>
              <option v-for="cate in cate1" :value="cate.value">{{cate.text}}</option>
            </select>
            <select name="" id="cate2" class="sel" @change="showCate2Code">
            	<option value="">--请选择--</option>
              <option v-for="cate in cate2" :value="cate.value">{{cate.text}}</option>
            </select>
            <select name="" id="cate3" class="sel" @change="confirmCate">
            	<option value="">--请选择--</option>
              <option v-for="cate in cate3" :value="cate.value">{{cate.text}}</option>
            </select>
            <span>{{warning.category}}</span>
          </div>
          <div class="input">
            <input type="text" v-model="mediaData.mediaName" placeholder="请输入媒体名称" /><span>{{warning.mediaName}}</span>
          </div>
          <div>
            <select name="" id="proCode" @change="showProCode()">
            	<option value="">--请选择--</option>
              <option v-for="pro in province" :value="pro.value" @change="genMediaCode(pro.abbr)">{{pro.text}}</option>
            </select>
            <select name="" id="cityCode" @change="showCityCode">
              <option value="">--请选择--</option>
              <option v-for="city in citys" :value="city.value">{{city.text}}</option>
            </select>
            <select name="" id="area" @change="confirmSelect">
              <option value="">--请选择--</option>
              <option v-for="area in areas" :value="area.value">{{area.text}}</option>
            </select><span>{{warning.area}}</span>
          </div>
          <div class="input">
            <input type="text" v-model="mediaData.address" placeholder="请输入您的详细地址" /><span>{{warning.addr}}</span>
          </div>
          <div class="default">
            <input type="text" v-model="mediaData.lightStyleId" placeholder="如：元/月/块" />
            <p><span>*</span>市场价</p>
            <input type="text" v-model="mediaData.discountPrice"  placeholder="￥" />
            <p><span>*</span>刊例价</p>
            <input type="text" v-model="mediaData.prices" placeholder="￥" /><span>*</span>
          </div>
          <div class="default">
            <input type="text" v-model="mediaData.minimumPrice" placeholder="￥" />
            <p><span>*</span>车流量</p>
            <input type="text" v-model="mediaData.numberOfCars" placeholder="" />
            <p>人流量</p>
            <input type="text" v-model="mediaData.numberOfVisitors" placeholder="" />
          </div>
          <div class="default">
            <select>
            	<option value=""v-model="mediaData.minCycle">--请选择--</option>
            	<option v-model="mediaData.minCycle" :value="1">周</option>
							<option v-model="mediaData.minCycle" :value="2">半月</option>
							<option v-model="mediaData.minCycle" :value="3">月</option>
							<option v-model="mediaData.minCycle" :value="4">季</option>
							<option v-model="mediaData.minCycle" :value="5">半年</option>
							<option v-model="mediaData.minCycle" :value="6">年</option>
							<option v-model="mediaData.minCycle" :value="7">天</option>
							<option v-model="mediaData.minCycle" :value="8">四周</option>
            </select>
          </div>
          <div class="one">
            <select name="" class="sel">
              <option v-model="mediaData.isAgency" value="0">自有媒体</option>
              <option v-model="mediaData.isAgency" value="1">代理媒体</option>
            </select>
          </div>
          <div class="default">
            <input type="text" v-model="mediaData.longitude" placeholder="经度" readonly="readonly"/>&nbsp;&nbsp;
            <input type="text" v-model="mediaData.latitude" placeholder="纬度" readonly="readonly"/>&nbsp;&nbsp;
            <button @click="showmap">{{button_text}}</button>
          </div>
          <div v-if="show_map" class="input" style="margin-top: 0; width: 1000px;">
          	<baidu-map class="map" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler" @click="clickHandler">
						  <bm-local-search :keyword="keyword" :auto-viewport="true" ></bm-local-search>
					  	<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
					  	<bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
					  	<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
					  	<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
					  	<bm-marker :position="marker" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" @click="infoWindowOpen">
					  		<bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">我爱北京天安门,天安门上太阳升！</bm-info-window>
					  	</bm-marker>
					  </baidu-map>
          </div>
          <div>
            <textarea v-model="mediaData.description" class="intro"></textarea>
          </div>
          <div>
            <textarea v-model="mediaData.remark" class="intro"></textarea>
          </div>
        </div>
      </div>
      <h4>图片信息</h4>
      <div class="message">
        <div class="message-left2">
          <p>媒体图片</p>
          <p class="scend">媒体点位图</p>
        </div>
        <div class="message-right">
        	<div class="select"></div>
          <!--<div class="select">
            <div>选择图片</div>
            <p><span class="color">*</span><span>注：按住ctrl键选择多张图片，单张图片10M之内。建议尺寸为300px*200px</span></p>
          </div>-->
          <div class="image-logo">
          	<div class="img_list">
	          	<form enctype="multipart/form-data" method="post" style="width: 210px; height: 140px;" @mouseenter="shom=1" @mouseleave="shom=0">
	          		<span class="up_span"><img id="img1" width="212px" height="138px" src="../assets/ym-member/media/model.png" /></span>
								<input id="up_img1" class="up_input" type="file" name="uploadfile" @change="upload_pic(1,0)"/>
<!--				遮罩				-->
                <div class="shade" v-if="pic1 ==1" v-show="shom==1">
                  <p>
                    <span @click="setAsCover(1)">设为封面</span>
                    <span @click="deletePic(1)">删除</span>
                  </p>
                </div>
							</form>
							<form enctype="multipart/form-data" method="post" style="width: 210px; height: 140px;" @mouseenter="shom=2" @mouseleave="shom=0">
	          		<span class="up_span"><img id="img2" width="212px" height="138px" src="../assets/ym-member/media/model.png" /></span>
								<input id="up_img2" class="up_input" type="file" name="uploadfile" @change="upload_pic(2,0)"/>
<!--				遮罩				-->
                <div class="shade" v-if="pic2==1" v-show="shom==2">
                  <p>
                    <span @click="setAsCover(2)">设为封面</span>
                    <span @click="deletePic(2)">删除</span>
                  </p>
                </div>
							</form>
							<form enctype="multipart/form-data" method="post" style="width: 210px; height: 140px;" @mouseenter="shom=3" @mouseleave="shom=0">
	          		<span class="up_span"><img id="img3" width="212px" height="138px" src="../assets/ym-member/media/model.png" /></span>
								<input id="up_img3" class="up_input" type="file" name="uploadfile" @change="upload_pic(3,0)"/>
<!--				遮罩				-->
                <div class="shade" v-if="pic3==1" v-show="shom==3">
                  <p>
                    <span @click="setAsCover(3)">设为封面</span>
                    <span @click="deletePic(3)">删除</span>
                  </p>
                </div>
							</form>
							<form enctype="multipart/form-data" method="post" style="width: 210px; height: 140px;" @mouseenter="shom=4" @mouseleave="shom=0">
	          		<span class="up_span"><img id="img4" width="212px" height="138px" src="../assets/ym-member/media/model.png" /></span>
								<input id="up_img4" class="up_input" type="file" name="uploadfile" @change="upload_pic(4,0)"/>
<!--				遮罩				-->
                <div class="shade" v-if="pic4==1" v-show="shom==4">
                  <p>
                    <span @click="setAsCover(4)">设为封面</span>
                    <span @click="deletePic(4)">删除</span>
                  </p>
                </div>
							</form>
          	</div>
          </div>
          <div class="select"></div>
          <!--<div class="select">
            <div>选择图片</div>
            <p><span class="color">*</span><span>注：按住ctrl键选择多张图片，单张图片10M之内。建议尺寸为300px*200px</span></p>
          </div>-->
          <div class="image-logo">
          	<div class="img_list">
	          	<form enctype="multipart/form-data" method="post" style="width: 210px; height: 140px;" @mouseenter="shom=5" @mouseleave="shom=0">
	          		<span class="up_span"><img id="img5" width="212px" height="138px" src="../assets/ym-member/media/model.png" /></span>
								<input id="up_img5" class="up_input" type="file" name="uploadfile" @change="upload_pic(5,1)"/>
<!--				遮罩				-->
                <div class="shade" v-if="pic5==1" v-show="shom==5">
                  <p>
                    <span>删除</span>
                  </p>
                </div>
							</form>
          	</div>
          </div>
        </div>
      </div>
      <h4>其他信息</h4>
      <div class="message">
        <div class="message-left">
          <p v-for="property in cateProperty">{{property.chName}}</p>
          <p class="eleven">原创承诺</p>
        </div>
        <div class="message-right" id="message-right">
          <div v-for="property in cateProperty" class="one">
            <select :id="property.enName" v-if="property.expressionType == 'select' " class="sel">
              <option v-for="option in property.propertyOptions" :value="option">{{option}}</option>
            </select>
            <input :id="property.enName" v-else-if="property.expressionType == 'input' || property.expressionType == 'combobox'" type="text" placeholder="" />
          </div>
          <!--<div class="input">
            <input type="text" placeholder="不得小于服务器当前日期，默认选择日期之后均可投放" /><span>填写后可以获得广告主更高的关注度</span>
          </div>-->
          <!--<div class="yes-or-no">
            <input type="radio" name="publish" v-model="mediaData.ispublish" value="1"/><span>是</span>
            <input type="radio" name="publish" v-model="mediaData.ispublish" value="0" class="no"/><span>否</span>
            <span class="color">注：审核通过的媒体只有发布后，才能被查询到</span>
          </div>-->
          <div class="yes-or-no">
            <input id="check" type="checkbox" /><span class="colors">{{warning.ischeck}}</span>
          </div>
          <div class="submit" @click="commitForm" style="cur">提交</div>
          <!--<router-link tag="div" to="/ymMembershop" class="submit">提交</router-link>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "yingmoo-store",
    data(){
	  	return {
	  		requestAddr:this.GLOBAL.addr,
	  		center: {lng: 0, lat: 0},
	  		zoom:3,
	  		show:false,
	  		show_map:false,
	  		button_text:"展开地图",
	  		marker:{lng:0,lat:0},
	  		keyword: '',
	  		user:{},
	  		meidaId:null,
	  		mediaCode:"MT",
	  		mediaData:{},
	  		category:{},
	  		province:[],
	  		citys:[],
	  		areas:[],
	  		cate1:[],
	  		cate2:[],
	  		cate3:[],
	  		cateCode:'',
	  		cateProperty:[],
	  		options:[],
	  		imgList:[],
	  		cateAutoCode:'',
	  		propertyList:[],
	  		warning:{
	  			category:"*",
	  			mediaName:"*",
	  			area:"*",
	  			addr:"*",
	  			image:"*",
	  			ispublish:"*",
	  			ischeck:"* 我保证所上传的媒体真实，如有问题，我将承担一切版权纠纷责任"
	  		},
        shom: 0,
        pic1:0,
        pic2:0,
        pic3:0,
        pic4:0,
        pic5:0
	  	}
	  },
		mounted(){
			this.getUser();
			this.getAreaList('');
			this.getCateList('');
		},
		methods:{
			handler ({BMap, map}) {
	      this.center.lng = 116.404
	      this.center.lat = 39.915
	      this.zoom = 15
	    },
	    infoWindowClose () {
	      this.show = false
	    },
	    infoWindowOpen () {
	      this.show = true
	    },
	    clickHandler(e) {
	      this.mediaData.longitude = e.point.lng;
	      this.mediaData.latitude = e.point.lat;
	      this.marker.lng = e.point.lng
	      this.marker.lat = e.point.lat
	    },
			//获取媒体分类、地区相关的绑定属性
			bindCategory:function(id){
				this.$http.post(this.requestAddr+"/GetJson/getCategoryInfo",{"id":id},{emulateJSON:true}).then(
					(res)=>{
						if(id.length==4){
							this.cateAutoCode = id;
							this.cateProperty = res.data.ymCategoryProperty;
							for (var i=0; i<(res.data.ymCategoryProperty).length; i++) {
								this.cateProperty[i].propertyOptions = (this.cateProperty[i].propertyOptions).split(",");
							}
						}else{
							this.cateAutoCode = id;
							for (var i=0; i<(res.data.ymCategoryProperty).length; i++) {
								res.data.ymCategoryProperty[i].propertyOptions = (res.data.ymCategoryProperty[i].propertyOptions).split(",");
							}
							this.cateProperty.push.apply(this.cateProperty,res.data.ymCategoryProperty);
						}
					}
				)
			},
			upload_pic:function(imgNum,type){
				var mediaImage = new Object();
				mediaImage.mediaId = this.mediaId;
				mediaImage.imageType = type;
				mediaImage.IsCover = 0;
				var file = document.getElementById("up_img"+imgNum).files[0];
				var formdata  = new FormData();
				formdata.append("file",file);
				this.$http.post(this.requestAddr+"/GetJson/uploadImage",formdata,{emulateJSON:true}).then(
					(res)=>{
						document.getElementById("img"+imgNum).src = res.data.filepath;
						mediaImage.url = res.data.filepath;
						/*图片上传成功后，保存图片路径到媒体图片库中*/
						this.$http.post(this.requestAddr+"/GetJson/saveMediaImage",mediaImage,{emulateJSON:true}).then(
							(res)=>{
								if(imgNum==1)
									this.pic1 = 1;
								if(imgNum==2)
									this.pic2 = 1;
								if(imgNum==3)
									this.pic3 = 1;
								if(imgNum==4)
									this.pic4 = 1;
								if(imgNum==5)
									this.pic5 = 1;
							}
						)
					}
				)
			},
			//将图片设置为封面
			setAsCover:function(imgNum){
				var imgSrc = document.getElementById("img"+imgNum).src;
				this.mediaData.cover = imgSrc
				/*this.$http.post(this.requestAddr+"/GetJson/setAsCover",{"imgUrl":imgSrc},{emulateJSON:true}).then(
					(res)=>{
						
					}
				)*/
			},
			//删除图标
			deletePic(picId){
				var imgSrc = document.getElementById("img"+picId).src;
				this.$http.post(this.requestAddr+"/GetJson/deleteMediaPic",{"imgUrl":imgSrc},{emulateJSON:true}).then(
					(res)=>{
						if(picId==1)
							this.pic1=0;
						if(picId==2)
							this.pic2=0;
						if(picId==3)
							this.pic3=0;
						if(picId==4)
							this.pic4=0;
						if(picId==5)
							this.pic5=0;
						document.getElementById("img"+picId).src = "../assets/ym-member/media/model.png";
					}
				)
			},
			//提交保存操作
			commitForm:function(){
				this.mediaData.memberId = this.user.autoId;
				this.mediaData.mediaId = this.mediaId;
				if(this.mediaData.cover == null){
					this.mediaData.cover = document.getElementById("img1").src
				}
				if(!this.checkForm()){
					alert("1123") ;
					return
				};
				
				this.$http.post(this.requestAddr+"/GetJson/saveMediaData",this.mediaData,{emulateJSON:true}).then(
					(res)=>{
						//媒体基本信息添加成功之后进行媒体扩展属性的添加
						if(res.data.code == 0){
							for(var i=0;i<(this.cateProperty).length;i++){
								var categoryProperty = new Object();
								categoryProperty.mediaId = this.mediaId;
								categoryProperty.propertyId = this.cateProperty[i].categoryId;
								categoryProperty.propertyName = this.cateProperty[i].chName;
								categoryProperty.enName = this.cateProperty[i].enName;
								categoryProperty.propertyContent = document.getElementById(this.cateProperty[i].enName).value;
								this.$http.post(this.requestAddr+"/GetJson/addMediaProperty",categoryProperty,{emulateJSON:true}).then(
									(res)=>{
										if(res.data.code==0){
											this.$confirm('媒体信息已上传成功！', '成功提示', {
									      confirmButtonText: '确定',
									      cancelButtonText: '取消',
									      type: 'success' 
							        }).then(
							        	()=>{
							        		window.location.href="../#/ymMembershop"
							        	}
							        )
										}
									}
								)							
							}
						}
					},(error)=>{
						console.log(error)
					}
				);
				
			},
			getUser:function(){
				var data = localStorage.getItem("user");
				if(data != null){
					this.user = JSON.parse(localStorage.getItem("user"));
					this.flag = true;
				}else{this.flag = false;}
				/*this.$http.get(this.requestAddr+"/GetJson/genMediaEntity",null,{emulateJSON:true}).then(
					(res)=>{
						this.mediaId = res.data.mediaId;
						this.mediaCode = res.data.mediaCode;
					}
				)*/
			},
			//根据areaCode获取省市区三级列表
			getAreaList:function(areaCode,abbr){
				this.areaCode = areaCode;
				this.$http.post(this.requestAddr+"/GetJson/getAreaList",{"parentCode":areaCode},{emulateJSON: true}).then(
					(res)=>{
						if(areaCode == null || areaCode == ''){
							this.province = res.data.result;
						}else if(areaCode != null && areaCode.length == 4){
							this.citys = res.data.result;
						}else{
							this.areas = res.data.result;
						}
					}
				);
			},
			//根据cateCode值获取分类信息
			getCateList:function(cateCode){
				this.$http.post(this.requestAddr+"/GetJson/getCategoryList",{"parentCode":cateCode},{emulateJSON: true}).then(
					(res)=>{
						if(cateCode == null || cateCode == ''){
							this.cate1 = res.data.result;						
						}else if(cateCode != null && cateCode.length == 4){
							this.cate2 = res.data.result;								
						}else{
							if(res.data.result != null){
								document.getElementById("cate3").style.display = "inline";
								this.cate3 = res.data.result;								
							}else{
								this.mediaData.categoryCode = document.getElementById("cate2").value;
								document.getElementById("cate3").style.display = 'none';
							}
						}
					}
				);
				this.bindCategory(cateCode);
			},
			//根据省级code获取市级列表
			showProCode:function(){
				var mySelected = document.getElementById("proCode");
				var val = mySelected.value;
				this.citys = null;
				this.areas = null;
				this.getAreaList(val,'');
				this.showCityCode();
			},
			//根据选中的市级code获取区级列表
			showCityCode:function(){
				var selected = document.getElementById("cityCode").value;
				if(selected != null && selected != ''){
					this.getAreaList(selected);				
				}else{
					this.areas = null;
				}
			},
			//确认获取最终选中的地域code
			confirmSelect:function(){
				var areaCode = document.getElementById("area").value;
				this.mediaData.mediaArea = areaCode;
				this.$http.post(this.requestAddr+"/GetJson/genMediaEntity",{"areaCode":areaCode},{emulateJSON:true}).then(
					(res)=>{
						console.log(res.data)
						this.mediaId = res.data.mediaId;
						this.mediaCode = res.data.mediaCode;
					}
				)
			},
			//根据选中的一级媒体分类获取二级分类列表
			showCate1Code:function(){
				var mySelected = document.getElementById("cate1");
				var val = mySelected.value;
				this.cate2 = null;
				this.cate3 = null;
				this.getCateList(val);
			},
			//根据选中的二级媒体分类获取三级分类列表
			showCate2Code:function(){
				var selected = document.getElementById("cate2").value;
				if(selected != null && selected != ''){
					this.getCateList(selected);				
				}else{
					this.cate3 = null;
				}
			},
			//获取最终选中的媒体分类
			confirmCate:function(){
				this.mediaData.categoryCode = document.getElementById("cate3").value;
			},
			checkForm:function(){
				var flag = true;
				if(this.mediaData.categoryCode == null || typeof(this.mediaData.categoryCode) == undefined){
					this.warning.category = "* 请选择媒体分类"
					flag = false;
				}
				if(this.mediaData.mediaName == null || typeof(this.mediaData.mediaName)==undefined){
					this.warning.mediaName = "* 请输入媒体名称";
					flag = false;
				}
				if(this.mediaData.address == null || typeof(this.mediaData.address)==undefined){
					this.warning.addr = "* 请输入详细地址";
					flag = false;
				}
				if(this.mediaData.mediaArea == null || typeof(this.mediaData.mediaArea)==undefined){
					this.warning.area = "* 请选择地区";
					flag = false;
				}
				var check = document.getElementById("check").checked;
				if(!check){
					this.warning.ischeck = "请勾选原创承诺";
					flag = false;
				}
				return flag;
			},
			showmap(){
				 if(this.show_map){
				 	this.show_map = false
				 	this.button_text = "展开地图"
				 }else{
				 	this.show_map = true
				 	this.button_text = "收起地图"
				 }
			}
		}
  }

</script>

<style scoped lang="less">
	.map {
	  width: 100%;
	  height: 400px;
	  border: 1px solid yellow;
	}
  .yingmoo-store {
    width: 100%;
    .nav {
      width: 1200px;
      height: 46px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      background-color: #f2f2f2;
      margin-top: 20px;
      li {
        list-style: none;
        width: 90px;
        height: 30px;
        margin: 0 20px;
        line-height: 30px;
        color: #666666;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        &:nth-child(1) {
          background-color: #036eb7;
          color: white;
        }
        &:hover {
          background-color: #036eb7;
          color: white;
        }
      }
      .uploading {
        width: 103px;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
        color: #999999;
        text-align: center;
        margin-left: 560px;
        cursor: pointer;
        img {
          position: relative;
          top: 5px;
          margin-right: 10px;
        }
      }
    }
    .content {
      width: 1200px;
      background-color: white;
      padding-bottom: 44px;
      margin: 0 auto;
      h4 {
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        padding-left: 40px;
        padding-top: 40px;
      }
      .message {
        display: flex;
        .message-left {
          p {
            width: 145px;
            text-align: right;
            line-height: 60px;
            font-size: 12px;
            color: #333333;
            &:nth-child(1) {
              margin-top: 20px;
            }
            /*&:nth-child(13) {
              margin-top: 65px;
            }*/
          }
          .eleven {
            margin-top: 0 !important;
          }
        }
        .message-left2{
        	p {
            width: 145px;
            text-align: right;
            line-height: 60px;
            font-size: 12px;
            color: #333333;
            &:nth-child(1) {
              margin-top: 15px;
            }
            &:nth-child(2) {
              margin-top: 105px;
            }
          }
          .scend{
            margin-top: 160px;
          }
          .eleven {
            margin-top: 0 !important;
          }
        }
        .message-right {
          margin-left: 25px;
          .one {
            .sel {
              width: 634px;
              margin-right: 0;
              color: #999999;
              padding-left: 10px;
            }
          }
          .name {
            margin-top: 30px;
            line-height: 37px;
          }
          div {
            margin-top: 25px;
            .intro {
              width: 628px;
              height: 95px;
              font-size: 14px;
              outline: none;
              border-radius: 3px;
              border: 1px solid #dddddd;
            }
            input {
              width: 622px;
              height: 31px;
              padding-left: 10px;
              font-size: 14px;
              outline: none;
              border-radius: 3px;
              border: 1px solid #dddddd;
            }
            span {
              margin-left: 10px;
              color: #f29600;
              font-size: 12px;
            }
            select {
              width: 198px;
              height: 37px;
              margin-right: 15px;
              outline: none;
              border-radius: 3px;
              border: 1px solid #dddddd;
              color: #999999;
              padding-left: 10px;
              background-image: url(../assets/ym-member/shop/triangle.png);
              background-repeat: no-repeat;
              background-position: 97% center;
              appearance:none;
              -moz-appearance:none;
              -webkit-appearance:none;
              &:nth-child(3) {
                margin-right: 1px;
              }
            }
          }
          .select {
            display: flex;
            align-items: center;
            margin-top: 10px;
            clear: both;
            div {
              width: 100px;
              height: 30px;
              background-color: #dddddd;
              color: #999999;
              text-align: center;
              line-height: 30px;
              border-radius: 3px;
              cursor: pointer;
              &:hover {
                color: white;
                background-color: #f29600;
              }
            }
            p {
              margin-top: 25px;
              .color {
                color: red;
                padding-right: 15px;
              }
            }
          }
          .default {
            display: flex;
            input {
              width: 130px;
              height: 31px;
              padding-left: 10px;
              font-size: 14px;
              outline: none;
              border-radius: 3px;
              border: 1px solid #dddddd;
            }
            span {
              margin-left: 10px;
              color: #f29600;
              line-height: 31px;
              font-size: 12px;
            }
            p {
              width: 82px;
              text-align: right;
              font-size: 12px;
              color: #333333;
              line-height: 31px;
              margin-right: 22px;
              span {
                margin-right: 20px;
                margin-left: 10px;
                color: #f29600;
                line-height: 31px;
                font-size: 12px;
              }
            }
          }
          .yes-or-no {
            height: 35px;
            font-size: 12px;
            color: #333333;
            line-height: 35px;
            margin-top: 15px;
            input {
              width: 14px;
            }
            .no {
              margin-left: 30px;
            }
            span {
              color: #333333;
              margin-left: 0;
              position: relative;
              bottom: 10px;
            }
            .color {
              color: #f29600;
              line-height: 35px;
              margin-left: 100px;
            }
            .colors {
              color: #f29600;
            }
          }
          .image-logo {
            img {
              margin-left: 20px;
              &:nth-child(1) {
                margin-left: 0;
              }
            }
            .img_list{
              position: relative;
            	form{
            		float: left;
            		margin-right: 22px;
            	}
	            .up_span{
								position: absolute;
								z-index: 0;
								width: 210px;
								height: 136px;
								margin: 0px;
								padding: 0px;
							}
							.up_input{
								position: absolute;
								z-index: 1000px;
								cursor: pointer;
								opacity: 0;
								width: 210px;
								height: 136px;
								padding: 0px;
							}
              .shade{
                width: 212px;
                height: 138px;
                position: absolute;
                margin-top: 0px;
                background-color: black;
                opacity: 0.7;
                cursor: default;
                p{
                  text-align: right;
                  padding-top: 100px;
                  padding-right: 20px;
                  span{
                    color: white;
                    font-size: 16px;
                    cursor: pointer;
                  }
                  
                }
              }
            }
          }
          .submit {
            width: 103px;
            height: 30px;
            color: white;
            background-color: #f29600;
            text-align: center;
            line-height: 30px;
            border-radius: 7px;
            margin-top: 44px;
            cursor: pointer;
          }
        }
      }
    }
  }

</style>
